<template>
  <div class="questions-filter">
    <!-- header -->
    <div class="questions-filter-header">
      <!-- 提示 -->
      <span class="filter-tip">说明:目前支持学科和关键字条件筛选</span>
      <!-- 提示/ -->

      <!-- 新增试题按钮 -->
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        @click="$router.push('/questions/new')"
      >
        新增试题
      </el-button>
      <!-- 新增试题按钮/ -->
    </div>
    <!-- header/ -->

    <!-- 筛选表单 -->
    <el-form ref="form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              @change="onObjectChange"
              v-model="form.subjectID"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in subjectsSimpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select
              v-model="form.catalogID"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in directorysSimpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select
              v-model="form.tags"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in tagsSimpleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input placeholder="根据题干搜索" v-model="form.keyword"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select
              v-model="form.questionType"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select
              v-model="form.difficulty"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select
              v-model="form.creatorID"
              placeholder="请选择"
              style="width:100%"
            >
              <el-option
                v-for="item in usersSimpleList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <city-picker :form="form"/>
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="3">
          <el-form-item>
            <el-button size="small" @click="onClear">清除</el-button>
            <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 筛选表单/ -->
  </div>
</template>

<script>
import { simple as subjectsSimple } from '@/api/hmmm/subjects.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { simple as usersSimple } from '@/api/base/users.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import cityPicker from './city-picker.vue'
export default {
  components: { cityPicker },
  name: 'questions-filter',
  data () {
    return {
      subjectsSimpleList: [], // 学科
      tagsSimpleList: [], // 标签
      directorysSimpleList: [], // 二级目录
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      usersSimpleList: [], // 用户简单列表
      form: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    }
  },

  created () {
    this.loadSubjectsSimpleList()
    this.loadUsersSimpleList()
  },

  methods: {
    // 加载学科简单列表
    async loadSubjectsSimpleList () {
      const { data } = await subjectsSimple()
      this.subjectsSimpleList = data
    },

    // 学科发生变化
    async onObjectChange (val) {
      const { data: tags } = await tagsSimple({
        subjectID: val
      })
      this.tagsSimpleList = tags
      const { data: directorys } = await directorysSimple({
        subjectID: val
      })
      this.directorysSimpleList = directorys
    },

    // 加载用户简单列表
    async loadUsersSimpleList () {
      const { data } = await usersSimple()
      this.usersSimpleList = data
    },

    // 点击清除按钮
    onClear () {
      this.form = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    },

    // 点击搜索按钮
    onSearch () {
      this.$emit('search', this.form)
    }
  }
}
</script>

<style scoped lang='scss'>
  .questions-filter {
    .questions-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      .filter-tip {
        font-size: 12px;
        color: pink;
      }
    }
  }
</style>
